<template>
  <div class="contain-home">
    <el-container>
      <el-header>
        <div class="left-box">
          <p class="title">绿色包装经济化实验<br>测试指导平台</p>
          <div class="nav-list">
            <span :class="routerActive === index ? 'active' : ''" v-for="(item,index) in routeList" :key="index" @click="routerActive = index">{{item.name}}</span>
          </div>
        </div>
        <div class="right-box">
          <el-dropdown @command="handleCommand" style="margin-left: 20px">
                          <span class="el-dropdown-link" style="color: #fff">
                            {{userInfo.userName? userInfo.userName + ',您好' : '暂未设置'}}
                          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item >退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <el-menu style="border: none"
                   :default-active="$route.path"
                   text-color="#fff"
                   router
          >
            <el-menu-item :index="item.path" style="background-color: #3491d4" v-for="item in routerPage" :key="item.id">
              <i :class="item.icon" style="color: #fff"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {quitLogin } from "../api/login";

  export default {
    name: 'Home',
    data(){
      return{
        routerActive:0,
        routerPage:[],
        routeList:[],
        userInfo:{}
      }
    },
    watch:{
      routerActive(newVaL,oldVal){
        this.routerPage = this.routeList[newVaL].child
        this.$router.push( this.routerPage[0].path)
      }
    },
    created() {
      this.userInfo =JSON.parse( sessionStorage.getItem('user'))
      if (this.userInfo.roleFlag === 3){
        this.routeList = [
          {
            name:'实验指导',
            child:[
              {
                id:1,
                name:'实验室管理要求公告',
                icon:'el-icon-document-copy',
                path:'/laboratoryAnnouncement'
              },
              {
                id:2,
                name:'实验指导书',
                icon:'el-icon-s-order',
                path:'/experimentalGuidance'
              },
              {
                id:3,
                name:'实验培训资源',
                icon:'el-icon-s-marketing',
                path:'/experimentalTraining'
              },
              {
                id:4,
                name:'实验评测',
                icon:'el-icon-menu',
                path:'/experimentalEvaluation'
              }
            ]
          },
          {
            name:'实验培训',
            child: [
              {
                id:5,
                name:'实验培训资源',
                icon:'el-icon-s-platform',
                path:'/train'
              }
            ]
          },
          {
            name:'实验案例库',
            child: [
              {
                id:6,
                name:'案例查询',
                icon:'el-icon-s-data',
                path:'/caseInquiry'
              },
              {
                id:7,
                name:'我的案例',
                icon:'el-icon-s-custom',
                path:'/myCase'
              },
            ]
          },
          {
            name:'个人中心',
            child: [
              {
                id:9,
                name:'我的信息',
                icon:'el-icon-s-custom',
                path:'/userData'
              },
              {
                id:10,
                name:'修改密码',
                icon:'el-icon-lock',
                path:'/setting'
              },
            ]
          }
        ]
      }else if (this.userInfo.roleFlag === 2){
        this.routeList = [
          {
            name:'实验指导',
            child:[
              {
                id:1,
                name:'公告管理',
                icon:'el-icon-document-copy',
                path:'/adminNotice'
              },
              {
                id:2,
                name:'实验指导书管理',
                icon:'el-icon-s-order',
                path:'/adminGuidelines'
              },
              {
                id:3,
                name:'实验培训资源管理',
                icon:'el-icon-s-marketing',
                path:'/adminTrain'
              },
              {
                id:4,
                name:'实验测评管理',
                icon:'el-icon-menu',
                path:'/adminEvaluation'
              },
              {
                id:665,
                name:'实验指导类别管理',
                icon:'el-icon-menu',
                path:'/caseCategoryTwo'
              }
            ]
          },
          {
            name:'实验培训',
            child: [
              {
                id:5,
                name:'实验培训资源管理',
                icon:'el-icon-s-platform',
                path:'/two'
              },
              {
                id:11,
                name:'实验培训资源类别',
                icon:'el-icon-s-platform',
                path:'/caseCategory'
              }
            ]
          },
          {
            name:'实验案例库',
            child: [
              {
                id:6,
                name:'系统案例库管理',
                icon:'el-icon-s-data',
                path:'/systemCase'
              },
              {
                id:7,
                name:'学生案例库管理',
                icon:'el-icon-s-grid',
                path:'/studentCase'
              },
              {
                id:778,
                name:'案例类别管理',
                icon:'el-icon-s-grid',
                path:'/caseCategoryThere'
              }
            ]
          },
          {
            name:'用户管理',
            child: [
              {
                id:8,
                name:'实验室管理',
                icon:'el-icon-set-up',
                path:'/laboratoryManage'
              },
              {
                id:9,
                name:'班级管理',
                icon:'el-icon-data-analysis',
                path:'/classManage'
              },
              {
                id:9,
                name:'学生管理',
                icon:'el-icon-school',
                path:'/studentManage'
              },
            ]
          },
          {
            name:'个人中心',
            child: [
              {
                id:9,
                name:'我的信息',
                icon:'el-icon-s-custom',
                path:'/userData'
              },
              {
                id:10,
                name:'修改密码',
                icon:'el-icon-lock',
                path:'/setting'
              },
            ]
          }
        ]
      }else if(this.userInfo.roleFlag === 1){
        this.routeList = [
          {
            name:'实验指导',
            child:[
              {
                id:1,
                name:'公告管理',
                icon:'el-icon-document-copy',
                path:'/adminNotice'
              },
              {
                id:2,
                name:'实验指导书管理',
                icon:'el-icon-s-order',
                path:'/adminGuidelines'
              },
              {
                id:3,
                name:'实验培训资源管理',
                icon:'el-icon-s-marketing',
                path:'/adminTrain'
              },
              {
                id:4,
                name:'实验测评管理',
                icon:'el-icon-menu',
                path:'/adminEvaluation'
              },
              {
                id:665,
                name:'实验指导类别管理',
                icon:'el-icon-menu',
                path:'/caseCategoryTwo'
              }
            ]
          },
          {
            name:'实验培训',
            child: [
              {
                id:5,
                name:'实验培训资源管理',
                icon:'el-icon-s-platform',
                path:'/two'
              },
              {
                id:11,
                name:'实验培训资源类别',
                icon:'el-icon-s-platform',
                path:'/caseCategory'
              }
            ]
          },
          {
            name:'实验案例库',
            child: [
              {
                id:6,
                name:'系统案例库管理',
                icon:'el-icon-s-data',
                path:'/systemCase'
              },
              {
                id:7,
                name:'学生案例库管理',
                icon:'el-icon-s-grid',
                path:'/studentCase'
              },{
                id:778,
                name:'案例类别管理',
                icon:'el-icon-s-grid',
                path:'/caseCategoryThere'
              }
            ]
          },
          {
            name:'用户管理',
            child: [
              {
                id:8,
                name:'教师管理',
                icon:'el-icon-office-building',
                path:'/teacherManage'
              },
              {
                id:9,
                name:'学生管理',
                icon:'el-icon-school',
                path:'/studentManage'
              },
              {
                id:10,
                name:'实验室管理',
                icon:'el-icon-set-up',
                path:'/laboratoryManage'
              },
              {
                id:11,
                name:'班级管理',
                icon:'el-icon-data-analysis',
                path:'/classManage'
              },
            ]
          },
          {
            name:'个人中心',
            child: [
              {
                id:12,
                name:'我的信息',
                icon:'el-icon-s-custom',
                path:'/userData'
              },
              {
                id:13,
                name:'修改密码',
                icon:'el-icon-lock',
                path:'/setting'
              },
            ]
          },
          {
            name:'操作日志',
            child:[
              {
                id:13,
                name:'操作日志',
                icon:'el-icon-notebook-2',
                path:'/log'
              }
            ]
          }
        ]
      }
      
    },
    mounted() {
      this.routerPage = this.routeList[0].child
      this.$router.push( this.routerPage[0].path)
    },
    methods:{
      handleCommand() {
        this.$confirm('确定退出登录吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          quitLogin().then(res =>{
            console.log(res)
            if (res.data.code === 200){
              this.$message.success(res.data.message)
              sessionStorage.clear()
              this.$router.replace('/')
            }
          })
      
        })
      },
    }
    
  }
</script>
<style scoped lang="less">
  .contain-home{
    width: 100vw;
    height: 100vh;
    /deep/ .el-dialog {
      background: transparent;
      box-shadow: none;
    }
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
    }
    .el-container{
      width: 100%;
      height: 100%;
      .el-aside{
        height: 100%;
        background-color: #3491d4;
        padding: 50px 0 0;
        box-sizing: border-box;
        /deep/.el-menu{
          background-color: transparent;
        }
        /deep/.el-menu-item.is-active {
          background-image: linear-gradient(to left, #b3d6ef 0%, #b4d7ef 1%, #b6daef 100%);
          color: #000!important;
        }
        /deep/.el-menu-item:hover{
          background-color: transparent !important;
        }
      }
      .el-header{
        padding: 0 30px;
        background-color: #308bd2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-box{
          display: flex;
          align-items: center;
          .title{
            font-size: 18px;
            color: #fff;
            letter-spacing: 1px;
            margin-right: 100px;
            text-align: center;
          }
          .nav-list{
            display: flex;
            span{
              display: inline-block;
              padding: 5px 0;
              color: #fff;
              font-size: 16px;
              margin: 0 30px;
              box-sizing: border-box;
              border-bottom: 2px solid transparent;
              &:hover{
                cursor: pointer;
              }
            }
            .active{
              border-bottom: 2px solid #fff;
            }
          }
        }
        .right-box{
          display: flex;
          align-items: center;
        }
      }
      .el-main{
        background-color: #f3f8ff;
      }
    }
  }
</style >
